﻿<style>
  .custom_upload .readonly .el-upload{
    display: none;
  }
  .custom_upload .readonly{
    display: inline-flex;
  }
  .custom_upload .hide_btn .el-upload{
    display: none;
  }
  .custom_upload .hide_btn{
    display: inline-flex;
  }
  .custom_upload .readonly .el-upload-list__item-status-label, .custom_upload .readonly .el-icon-close, .custom_upload .readonly .el-icon-close-tip {
    display: none!important;
  }
  .custom_upload .readonly .el-upload-list__item-name {
    margin-right: 0;
  }
  .custom_upload .readonly .el-upload-list__item:first-child {
    margin-top: -10px;
  }
</style>
<template>
  <div class="custom_upload">
  <el-upload
    :action="action?action:baseUrl+'/upload'"
    :headers="headers"
    :data="data"
    :name="name"
    :show-file-list="showFileList"
    :accept="accept"
    :on-preview="onPreview"
    :on-remove="handleRemove"
    :before-remove="handleBeforeRemove"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-error="onError"
    :file-list="fileList"
    :on-change="handleChange"
    multiple
    :class="readonly?'readonly':(type=='single'&&fileList.length>=1)?' hide_btn':''"
  >
    <el-button size="small" v-if="!readonly&&!(type=='single'&&fileList.length>=1)" type="primary">点击上传</el-button>
  </el-upload>
    <el-dialog title="操作确认" width="30%" :visible.sync="previewConfirmVisible" append-to-body>
      <span>请选择需要的操作</span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="previewFile(currentFile)">预览</el-button>
      <el-button type="primary" @click="downloadFile(currentFile)">下载</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
function noop() {}
export default {
  name: "Upload",
  // props:{
  //   title: {},action:{},headers:{},data:{},name:{},showFileList:{type:Array,default:false}
  //   ,accept:{},'on-preview':{},'on-remove':{},fileList:{type:Array,default:()=>{return []}}
  // },
  props: {
    title: {},
    readonly: {
      type: Boolean,
      default: false
    },
    baseUrl: {
      type: String,
      default() {
        return Vue.prototype.$ctx+"/file";
      }
    },
    action: {
      type: String,
      default:null
    },
    headers: {
      type: Object,
      default() {
        return {};
      }
    },
    data: Object,
    multiple: Boolean,
    name: {
      type: String,
      default: "file"
    },
    drag: Boolean,
    dragger: Boolean,
    withCredentials: Boolean,
    showFileList: {
      type: Boolean,
      default: true
    },
    accept: String,
    type: {
      type: String,
      default: "select"
    },
    beforeUpload: Function,
    beforeRemove: { type: Function, default: noop },
    onRemove: {
      type: Function,
      default: (file, fileList) => {}
    },
    onChange: {
      type: Function,
      default: noop
    },
    onSuccess: {
      type: Function,
      default: noop
    },
    onProgress: {
      type: Function,
      default: noop
    },
    onError: {
      type: Function,
      default: noop
    },
    fileList: {
      type: Array,
      default() {
        return [];
      }
    },
    autoUpload: {
      type: Boolean,
      default: true
    },
    listType: {
      type: String,
      default: "text" // text,picture,picture-card
    },
    httpRequest: Function,
    disabled: Boolean,
    limit: Number,
    onExceed: {
      type: Function,
      default: noop
    }
  },
    data(){
      return {
          previewConfirmVisible:false,
          currentFile:{},
      }
    },
  methods: {
      onPreview(file){
          if(window.filePreviewSupports&&file.name&&file.name.lastIndexOf('.')>=0){

              var fileType = file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length);
              var support = false;
              for(var item of window.filePreviewSupports){
                  if(fileType == item) {
                      support = true;
                      break;
                  }
              }
              if(!support) {
                  return this.downloadFile(file);
              }
          }
          this.previewConfirmVisible = true;
          this.currentFile = file;
      },
      downloadFile(file) {
          this.previewConfirmVisible = false;
          window.open(this.baseUrl+'/download/'+file.id);
      },
      previewFile(file) {
          this.previewConfirmVisible = false;
          window.open(this.baseUrl+'/preview/'+file.id);
      },
    handleChange(file, fileList) {
      this.fileList.splice(0, this.fileList.length);
      for (var item of fileList) {
        this.fileList.push(item);
      }
      this.onChange(file, fileList);
    },
    handleSuccess(response, file, fileList) {
        if(response.code!=0) {
            for(var i=0;i<fileList.length;i++) {
                var item = fileList[i];
                if(item === file) {
                    fileList.splice(i,1);
                }
            }
            this.$message.error(response.msg);
            return;
        }
      if (response.data) {
        file.id = response.data;
      }

      this.onSuccess(response, file, fileList);
    },
    handleRemove(file, fileList) {
      this.$post(this.baseUrl+"/delete/" + file.id,{},data => {

          this.fileList.splice(0, this.fileList.length);
          for (var item of fileList) {
            if (item.id == file.id) {
              continue;
            }
            this.fileList.push(item);
          }
        },data => {
          if (data.code != 0) {
              fileList.push(file);
              return;
          }
      });

      this.onRemove(file, fileList);
    },
    handleBeforeRemove(file, fileList) {
      if (this.beforeRemove == noop) {
        return this.$confirm(`确定移除 ${file.name}？`);
      }
      return this.beforeRemove(file, fileList);
    }
  }
};
</script>
